<template>
  <div class="shop_container">
    <ul class="shop_list">
      <li class="shop_li" v-for="(item, index) in imgList" :key="index">
        <div class="shop_left" @click="goTo(`/tuijian/${item.id}`)">
          <img class="shop_img" :src="item.url" />
          <div class="shop_left1">
            {{ item.title }}
          </div>
        </div>
      </li>
    </ul>
    <p class="CardList_content">没有更多了</p>
  </div>
</template>
<script>
import { reqList } from "../../api/index";
export default {
  data() {
    return {
      imgList: [],
      imageList: [],
    };
  },
  created() {
    reqList().then((res) => {
      this.imgList = res.data;
      // console.log(res.data);
    });
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
  },
};
</script>
<style lang="stylus" rel="stylesheeet/stylus">
@import "../../common/stylus/mixins.styl"
  .shop_container
    .shop_list{
      width 100%
      height 100%
      overflow hidden
      .shop_li{
        display:inline;
        width 100%
        height 150px
        .shop_left{
          width 49%
          margin 2% 0 0 3px
          float left
          height 180px
          }
        }
      }
      .shop_img{
      display block
      border-radius 13px
      width 100%
      height 75%
      }
    .shop_right{
      width 49%
      height 140px
      float right
      background-color #eee
    }
    .shop_left1{
      overflow: hidden; /*超出盒子宽度部分文字被隐藏*/
      text-overflow: ellipsis /*当文本溢出包含元素时发生的事情 ellipsis*/
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      font-size:15px;
      line-height 20px
      margin-top: 5px;
    }
    .CardList_content{
      width: 100%;
      height: 30px;
      margin-top: 20px;
      text-align: center;
      color: #7d7979;
      font-size: 14px;
    }
</style>
